<template>
    <div class="home_ER_code_box" v-show="display">
        <p class="home_ER_code_box_title">{{ er_code.title }}</p>
        <p class="home_ER_code_box_title_subheading">{{ er_code.subheading }}</p>

        <div class="home_ER_code_erCode">
            <img :src="er_code.img" alt="">
            <ul class="home_ER_code_description">
                <li v-for="(item,index) in er_code.msg" :key="index">
                    {{ item }}
                </li>
            </ul>
        </div>

        <div class="home_ER_code_footer" @click="toSearch">
            <span>输入</span>
            <span>立刻搜索</span>
            <img src="/public/img/header/search.svg" alt="">
        </div>

        <div class="home_ER_code_but">
            <label><input type="checkbox" v-model="display_but">不再显示</label>
            <span class="home_ER_code_shut_down" @click="shutDown">x</span>
        </div>
    </div>
</template>


<script setup>
import {onMounted, ref} from "vue";
//是否显示
const display = ref(false)
//是否持久关闭
const display_but = ref(false)

//预加载
onMounted(() => {
    let item = window.localStorage.getItem("er_code");
    if (!item) {
        display.value = true;
    }
})

// 内容列表
const er_code = ref({
    title: "微信扫描下方二维码",
    img: "/img/ewm.png",
    url:"https://blog.lyzhnb.top",
    subheading: "立即扫描【即可浏览】",
    msg: ["免费", "游戏", "软件", "浏览", "文章", "下载"],
})

// 关闭事件
const shutDown = () => {
    if (display_but.value) {
        window.localStorage.setItem("er_code", "shut down ad")
    }
    display.value = false;
}

//点击进入
const toSearch = ()=>{
    window.open(er_code.value.url,"_blank");
}
</script>

<style scoped>

.home_ER_code_box {
    position: relative;
    padding: 30px 35px;
    background: rgb(7, 204, 121);
    color: white;
    font-weight: bolder;
}
.home_ER_code_box:hover{
    opacity: .9;
}

.home_ER_code_box_title {
    font-size: 20px;
}

.home_ER_code_box_title_subheading {
    font-size: 22px;
    margin-bottom: 15px;
}

.home_ER_code_erCode {
    display: flex;
    margin-bottom: 15px;
}

.home_ER_code_erCode img {
    width: 120px;
    height: 110px;
    margin-right: 3px;
}

.home_ER_code_description {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(2, minmax(30px, 60px));
    grid-template-rows: repeat(3, minmax(30px, 33%));
    justify-items: center;
    align-items: center;
    font-size: 17px;
}

li:nth-child(2) {
    font-size: 22px;
}

li:nth-child(3) {
    font-size: 22px;
}

li:nth-child(5) {
    font-size: 22px;
}


.home_ER_code_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background: white;
    color: #222222;
    font-size: 19px;
    border-radius: 3px;
    padding: 10px 15px;
    cursor: pointer;
}

.home_ER_code_footer img {
    width: 30px;
}

.home_ER_code_but {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    top: 0;
    right: 0;
    font-size: 12px !important;
    font-weight: normal;
    cursor: pointer;
}

.home_ER_code_but label {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.home_ER_code_shut_down {
    width: 20px;
    height: 20px;
    background: #181a19;
    line-height: 20px;
    text-align: center;
}

.home_ER_code_shut_down:hover {
    opacity: .8;
}
</style>